<div class="layui-card">
    <div class="layui-card-header">
        <h2 class="header-title">字典管理</h2>
        <span class="layui-breadcrumb pull-right">
          <a href="#!console">首页</a>
          <a><cite>字典管理</cite></a>
        </span>
    </div>
    <div class="layui-card-body">
        <div class="layui-form toolbar">
            <button id="dict-btn-add" class="layui-btn icon-btn"><i class="layui-icon" >&#xe654;</i>添加</button>
        </div>
        <div class="layui-row layui-col-space1">
            <div class="layui-col-md4">
              <table class="layui-table" id="dict-table" lay-filter="dict-table"></table>
            </div>
            <div class="layui-col-md5">
              <table class="layui-table" id="dictitem-table" lay-filter="dictitem-table"></table>
            </div>
            <div class="layui-col-md3">
              <form id="dictitem-form" lay-filter="dictitem-form" class="layui-form model-form layui-hide" method="post">
                    <div class="layui-form-item">
                        <label class="layui-form-label">名称</label>
                        <div class="layui-input-block">
                            <input type="text" name="id" class="layui-hide">
                            <input type="text" name="_method" class="layui-hide">
                            <input name="name" placeholder="请输入名称" type="text" class="layui-input" maxlength="20"
                                   lay-verify="required" required/>
                        </div>
                    </div>
                    <div class="layui-form-item">
                        <label class="layui-form-label">编码</label>
                        <div class="layui-input-block">
                            <input disabled="disabled" name="code" placeholder="请输入编码" type="text" class="layui-input" lay-verify="required"
                                   required/>
                        </div>
                    </div>
                    <div class="layui-form-item">
                        <label class="layui-form-label">子码</label>
                        <div class="layui-input-block">
                            <input name="item_code" placeholder="请输入子码" type="text" class="layui-input" lay-verify="required"
                                   required/>
                        </div>
                    </div>
                    <div class="layui-form-item">
                        <label class="layui-form-label">排序</label>
                        <div class="layui-input-block">
                            <input name="sort" placeholder="请输入排序" type="text" class="layui-input" maxlength="20"/>
                        </div>
                    </div>
                    <div class="layui-form-item">
                        <label class="layui-form-label">备注</label>
                        <div class="layui-input-block">
                            <textarea name="remark" placeholder="请输入备注" class="layui-textarea"></textarea>
                        </div>
                    </div>
                    <div class="layui-form-item model-form-footer">
                        <button class="layui-btn" lay-filter="dictitem-form-submit" lay-submit>保存</button>
                    </div>
                </form>
            </div>
          </div>
        
    </div>
</div>
<script type="text/html" id="dict-model">
    <form id="dict-form" lay-filter="dict-form" class="layui-form model-form">
        <input name="dictId" type="hidden"/>
        <div class="layui-form-item">
            <label class="layui-form-label">名称</label>
            <div class="layui-input-block">
                <input name="name" placeholder="请输入名称" type="text" class="layui-input" maxlength="20"
                       lay-verify="required" required/>
            </div>
        </div>
        <div class="layui-form-item">
            <label class="layui-form-label">编码</label>
            <div class="layui-input-block">
                <input type="text" name="id" class="layui-hide">
                <input name="code" placeholder="请输入编码" type="text" class="layui-input" maxlength="20"
                       lay-verify="required" required/>
            </div>
        </div>
        <div class="layui-form-item model-form-footer">
            <button class="layui-btn layui-btn-primary" ew-event="closeDialog" type="button">取消</button>
            <button class="layui-btn" lay-filter="dict-form-submit" lay-submit>保存</button>
        </div>
    </form>
</script>
<script>
    layui.use(['form', 'table', 'util', 'config', 'admin'], function () {
        var form = layui.form;
        var table = layui.table;
        var config = layui.config;
        var layer = layui.layer;
        var util = layui.util;
        var admin = layui.admin;

        var dictionary = {
            init:function(){
                dictionary.initDictTable();
                dictionary.initDictitemTable();
                dictionary.subimtFormBind();

                $("#dict-btn-add").on('click',function(){
                    dictionary.showOrEditDictModel();
                });

                dictionary.subimtDictFormBind();
            },
            initDictTable:function(){
                // 渲染表格
                dictTable=table.render({
                    elem: '#dict-table',
                    url: 'http://localhost/service-system/dicts',
                    method: 'GET',
                    where: {
                        access_token: config.getToken().access_token
                    },
                    height:'full-300',
                    page: true,
                    cols: [[
                        {title: '操作',align:'center',width:145,templet:function(d){
                            return '<a class="layui-btn layui-btn-normal layui-btn-xs" lay-event="select">选择</a>'
                            +'<a class="layui-btn layui-btn-primary layui-btn-xs" lay-event="edit">编辑</a>'
                            +'<a class="layui-btn layui-btn-danger layui-btn-xs" lay-event="del">删除</a>';
                        }},
                        {field: 'code',width:100,align:'center',title: '编码'},
                        {field: 'name',align:'center',title: '名称',minWidth:120},
                    ]]
                    ,
                    parseData: function(res){ //res 即为原始返回的数据
                            return {
                              "code": '0', //解析接口状态
                              "msg": res.msg, //解析提示文本
                              "count": res.data.total, //解析数据长度
                              "data": res.data.records //解析数据列表
                            };
                          }
                });

                // 工具条点击事件
                table.on('tool(dict-table)', function (obj) {
                        var event = obj.event;
                        var data = obj.data;
                        if(event === 'select'){
                            dictionary.reloadDictItemTable(obj.data.code);
                            dictionary.setFormValue({code:obj.data.code,_method:'post'});
                        }
                        if(event === 'edit'){
                            dictionary.showOrEditDictModel(data);
                        }
                        if(event === 'del'){
                            dictionary.deleteDict(obj.data.code);
                        }
                });
            }
            ,reloadDictTable:function(){
                dictTable.reload({
                    where:{
                        access_token: config.getToken().access_token,
                    },
                    page:{
                        curr:1
                    }
                })
            },
            initDictitemTable:function(){
                // 渲染表格
                dictItemTable = table.render({
                    elem: '#dictitem-table',
                    data:[],
                    method: 'GET',
                    where: {
                        access_token: config.getToken().access_token
                    },
                    height:'full-300',
                    page: true,
                    cols: [[
                        {title: '操作',align:'center',width:120,templet:function(d){
                           return '<a class="layui-btn layui-btn-normal layui-btn-xs" lay-event="select">选择</a>'
                            + '<a class="layui-btn layui-btn-danger layui-btn-xs" lay-event="del">删除</a>'
                           ;
                        }},
                       // {field: 'id',align:'center',title: 'id'},
                        {field: 'name',align:'center',title: '名称'},
                        {field: 'item_code',align:'center',width:100,title: '子码'},
                        {field: 'sort',align:'center',title: '排序',width:60},
                        {field: 'remark',align:'center',title: '备注'},
                        
                    ]]
                    ,
                    parseData: function(res){ //res 即为原始返回的数据
                            return {
                              "code": '0', //解析接口状态
                              "msg": res.msg, //解析提示文本
                              "count": res.data.total, //解析数据长度
                              "data": res.data.records //解析数据列表
                            };
                          }
                }); 

                // 工具条点击事件
                table.on('tool(dictitem-table)', function (obj) {
                        var event = obj.event;
                        var data = obj.data;
                        if(event === 'select'){
                            data._method = 'put';
                            dictionary.setFormValue(obj.data);
                        }
                        if(event === 'del'){
                            dictionary.deleteDcititem(data.id);
                        }
                });
            },
            reloadDictItemTable:function(code){
                dictItemTable.reload({
                    url: 'http://localhost/service-system/dictitems/'+code,
                    where:{
                        access_token: config.getToken().access_token,
                    },
                    page:{
                        curr:1
                    }
                })
            },
            setFormValue:function(data){
                $('#dictitem-form')[0].reset();
                form.val('dictitem-form',data);
                $("#dictitem-form").removeClass('layui-hide');
                if(data._method === 'post'){
                    $("button[lay-filter='dictitem-form-submit']").html('新增');
                }else{
                    $("button[lay-filter='dictitem-form-submit']").html('修改');
                }            
            },
            reqForm:function(_data){
                admin.req('service-system/dictitem', _data, function (data) {
                    layer.closeAll('loading');
                    if (data.code === 10000) {
                        layer.msg(data.msg, {icon: 1});
                        dictionary.reloadDictItemTable(_data.code);
                    } else {
                        layer.msg(data.msg, {icon: 2});
                    }
                }, _data._method);
            },
            subimtFormBind:function(){
                form.on('submit(dictitem-form-submit)', function(data){
                    dictionary.reqForm(data.field);
                    return false; //阻止表单跳转。如果需要表单跳转，去掉这段即可。
                });
            },
            deleteDcititem:function(id){
                admin.req('service-system/dictitem/'+id, {access_token: config.getToken().access_token,}, function (data) {
                    layer.closeAll('loading');
                    if (data.code === 10000) {
                        layer.msg(data.msg, {icon: 1});
                    } else {
                        layer.msg(data.msg, {icon: 2});
                    }
                }, 'delete');
            },
            showOrEditDictModel:function(_data){
                layer.open({
                    type: 1,
                    title: _data ? '修改字典' : '添加字典',
                    area: '450px',
                    offset: '120px',
                    content: $('#dict-model').html(),
                    success: function () {
                        $('#dict-form')[0].reset();
                        $('#dict-form').attr('method', 'post');
                        if (_data) {
                            form.val('dict-form', _data);
                            $('#dict-form').attr('method', 'put');
                        }
                    }
                });
            },
            subimtDictFormBind:function(){
                form.on('submit(dict-form-submit)', function(data){
                    admin.req('service-system/dict', data.field, function (data) {
                    layer.closeAll('loading');
                    if (data.code === 10000) {
                        layer.msg(data.msg, {icon: 1});
                        dictionary.reloadDictTable();
                        layer.closeAll('page');
                    } else {
                        layer.msg(data.msg, {icon: 2});
                    }
                }, $('#dict-form').attr('method'));
                    return false; //阻止表单跳转。如果需要表单跳转，去掉这段即可。
                });
            }
            ,deleteDict:function(code){
                admin.req('service-system/dict/'+code, {access_token: config.getToken().access_token,}, function (data) {
                    layer.closeAll('loading');
                    if (data.code === 10000) {
                        layer.msg(data.msg, {icon: 1});
                        dictionary.reloadDictTable();
                        dictionary.reloadDictItemTable();
                        $("#dictitem-form").addClass('layui-hide');
                    } else {
                        layer.msg(data.msg, {icon: 2});
                    }
                }, 'delete');
            },

        };

        dictionary.init();
    });
</script>